import { getTemplate } from "@/services/api/module/message/messageTemplate";
import {
	ActionType,
	EditableProTable,
	ModalForm,
	ProColumns,
	ProForm,
	ProFormInstance,
	ProFormText
} from "@ant-design/pro-components";
import React, { useEffect, useRef, useState } from "react";
export type TemplateFormData = Record<string, unknown> & Partial<API.Message.MessageTemplateBo>;
export type TemplateFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: TemplateFormData) => Promise<any>;
	id: number | undefined;
	open: boolean;
};
type DataSourceType = {
	id: React.Key;
	paramName?: string;
	value?: string;
};
const columns: ProColumns<DataSourceType>[] = [
	{
		title: "参数名",
		dataIndex: "paramName",
		readonly: true
	},
	{
		title: "值",
		key: "value",
		dataIndex: "value",
		valueType: "text",
		formItemProps: {
			rules: [
				{
					required: true,
					whitespace: true,
					message: "此项是必填项"
				}
			]
		}
	}
];
const TestTemplateForm: React.FC<TemplateFormProps> = props => {
	const { id, onCancel, onSubmit, open } = props;
	const eidtTableRef = useRef<ActionType>();
	const formRef = useRef<ProFormInstance>();
	const [varData, setVarData] = useState<DataSourceType[]>([]);
	const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => varData.map((item, index) => index));
	// 关闭
	const handleCancel = () => {
		onCancel();
	};

	const getTemplateInfo = () => {
		getTemplate(id as number).then(res => {
			const variablies = JSON.parse(res.data?.variable);
			if (variablies.length === 0) {
				return;
			}
			const vars: React.SetStateAction<DataSourceType[]> | { id: any; paramName: any; value: string }[] = [];
			variablies?.forEach((item: { id: any; key: any }) => {
				vars.push({
					id: item?.id,
					paramName: item?.key,
					value: ""
				});
			});
			console.log(vars);
			setVarData(vars);
			formRef.current?.setFieldValue("variable", vars);
			setEditableRowKeys(() => variablies.map((item: any, index: any) => index));
		});
	};
	useEffect(() => {
		if (id) {
			getTemplateInfo();
		}
	}, [id]);

	// 表单提交
	const handleFinish = async (values: TemplateFormData) => {
		// @ts-ignore
		return onSubmit({
			...values,
			id: id ? id : undefined
		} as TemplateFormData);
	};

	return (
		<>
			<ModalForm<TemplateFormData>
				open={open}
				formRef={formRef}
				title="测试发送模板发送消息"
				grid={true}
				modalProps={{
					centered: false,
					destroyOnClose: true,
					onCancel: () => {
						handleCancel();
					}
				}}
				onFinish={async values => {
					handleFinish(values);
				}}
			>
				<ProFormText
					colProps={{ xs: 24, md: 24, lg: 24 }}
					name="sendTo"
					label="收件人账号"
					placeholder="请输入收件人账号"
					rules={[
						{
							required: true,
							message: "请输入收件人账号"
						}
					]}
				/>
				<ProForm.Item extra="该项为模板内容中提取的参数!" label="参数值" name="variable" trigger="onValuesChange">
					<EditableProTable<DataSourceType>
						rowKey="id"
						toolBarRender={false}
						bordered
						name="variable"
						actionRef={eidtTableRef}
						columns={columns}
						recordCreatorProps={false}
						editable={{
							type: "multiple",
							editableKeys,
							onChange: setEditableRowKeys
						}}
					/>
				</ProForm.Item>
			</ModalForm>
		</>
	);
};
export default TestTemplateForm;
